<template>
  <div class="card" @click="showDetail(allParams)">
    <div class="cover">
      <img class="img" v-lazy="imgPath" :alt="title" />
      <div class="count">
        <span
          ><span class="sm">
            <i class="fa fa-bofangshu"></i
            >{{ allParams.stat.view | formatNumber }}</span
          >
          <span class="sm">
            <i class="fa fa-danmushu"></i
            >{{ allParams.stat.danmaku | formatNumber }}
          </span></span
        >
        <span class="sm">{{ allParams.duration | formatTime }}</span>
      </div>
    </div>
    <div class="title" v-html="title"></div>
    <div class="bar">
      <div class="tag">
        <!-- <span>便签</span> -->
        <!-- <van-tag color="#fff1ee" text-color="#ff936a">标签</van-tag> -->
        <van-tag color="#9e9e9e" v-if="allParams.ad" text-color="#9e9e9e" plain
          >广告</van-tag
        >
        <van-tag color="#fff1ee" v-else text-color="#ff936a">{{
          allParams.tname
        }}</van-tag>
      </div>
      <i class="iconfont icon-diandiandianshu"></i>
    </div>
  </div>
</template>

<script>
import { formatNumber, formatTime } from '@/filters/filters.js'
export default {
  name: 'VideoItem',
  props: {
    // 视频aid
    aid: {
      type: [Number, String]
    },
    // 视频bvid
    bvid: {
      type: String,
      required: true
    },
    // 作者
    author: {
      type: String
    },
    // 封面图路径
    coverPath: {
      type: String,
      required: true
    },
    // 视频标题
    title: {
      type: String,
      required: true
    },
    // 封面图尺寸
    coverSize: {
      type: String,
      default: '@480w_270h_1c'
    },
    // 播放数
    view: {
      type: Number
    },
    // 弹幕数
    danmaku: {
      type: Number
    },
    // 时长
    duration: {
      type: [Number, String]
    },
    // 布局 默认 ttb 从上到下， 可选 ltr 从左到右
    layout: {
      type: String,
      default: 'ttb'
    },
    // 所有参数
    allParams: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  inject: ['rootRouter'],
  computed: {
    imgPath () {
      return this.coverPath + this.coverSize
    }
  },
  filters: {
    formatNumber,
    formatTime
  },
  methods: {
    showDetail (allParams) {
      this.$emit('video-click', allParams)
      const { bvid } = allParams
      this.rootRouter.push({ name: 'video', params: { bvid } })
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  padding-bottom: rem(30px);
  position: relative;
  .bar {
    width: 96%;
    position: absolute;
    bottom: rem(4px);
    left: rem(4px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: rem(12px);
    color: #c0c0c0;
  }
  .cover {
    @include cover(480, 270, rem(2px));
    background: {
      color: $color-grey;
      size: 36%;
      image: url("~@/assets/placeholder.png");
      repeat: no-repeat;
      position: 50%;
    }
  }
  .count {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    font-size: rem(12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: rem(5px) rem(6px);
    color: #fff;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
    .fa {
      font-size: rem(16px);
      margin-right: rem(5px);
      vertical-align: middle;
    }
    .sm {
      margin-right: rem(4px);
      .fa {
        margin-right: rem(3px);
      }
    }
  }
  .title {
    @include max-lines(2);
    font-size: rem(12px);
    margin-top: rem(6px);
    padding: 0 rem(6px);
  }
}
.card-horizontal {
  display: flex;
  padding: rem(5px);
  .cover {
    @include cover(480, 270);
    width: rem(140px);
    .img {
      object-fit: cover;
      object-position: 50% 50%;
    }
    .duration {
      position: absolute;
      right: rem(4px);
      bottom: rem(4px);
      color: $color-white;
      font-size: rem(12px);
      padding: {
        left: rem(2px);
        right: rem(2px);
      }
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: rem(10px);
    font-size: rem(12px);
    color: $color-text-secondary;
  }
  .title {
    color: #222;
    @include max-lines(2);
    font-size: rem(14px);
    margin-bottom: rem(8px);
  }
  .author {
    display: flex;
    align-items: center;
    margin-bottom: rem(4px);
  }
  .count {
    display: flex;
    align-items: center;
    span:first-child {
      margin-right: rem(10px);
    }
  }
  .fa {
    margin-right: rem(5px);
    vertical-align: middle;
  }
}
</style>
